<template>
  <div class="bottomBox">
    <div class="bottomHeader">
      <img
        src="../../images/fae98107-94c4-47d1-ab04-f3e21ba7d864.png"
        alt=""
        @click="goBackBottom"
      />
      <b class="icon-button" @click="openMessages">
        <i class="iconfont icon-lingdang bell"></i>
      </b>
    </div>
    <div class="contentBottom">
      <div class="Maindiv">
        <img
          class="imgclass"
          src="https://ts1.cn.mm.bing.net/th/id/R-C.ce8f47c416474dc9193b2cc6d67a286e?rik=lH4gwDoCBGuQAw&riu=http%3a%2f%2fpic.bizhi360.com%2fbpic%2f46%2f10846.jpg&ehk=%2fuobbG7oKITxR2y7rcPtqvNGX9b0s5LIpM%2bdc0l7ooY%3d&risl=&pid=ImgRaw&r=0"
          alt=""
          @click="showDrawer"
        />
        <a-drawer
          :placement="placement"
          :closable="false"
          :visible="visible"
          @close="onClose"
        >
          <button class="btn" @click="switchItem">更换形象照</button>
          <button class="btn" @click="onClose">取消</button>
        </a-drawer>
        <b class="HXq" @click="details">查看详情 →</b>
      </div>
    </div>
    <div class="FooterB">
      <div @click="HistoryGo">
        <i class="iconfont icon-xinjianlingyongdan"></i>
        <h3>历史问诊</h3>
      </div>
      <div @click="goMyComponent">
        <i class="iconfont icon-jishiben1"></i>
        <h3>记事本</h3>
      </div>
      <div @click="purse">
        <i class="iconfont icon-wodeqianbao"></i>
        <h3>我的钱包</h3>
      </div>
      <div @click="GoReply">
        <i class="iconfont icon-zidonghuifu"></i>
        <h3>自动回复</h3>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
import { ref } from "vue";

const visible = ref(false);
const placement = ref("bottom");
const goBackBottom = () => {
  router.push("/header");
};
const openMessages = () => {
  router.push("/Message");
};
const HistoryGo = () => {
  router.push("/History");
};
const details = () => {
  router.push("/Details");
};
const goMyComponent = () => {
  router.push("/MyComponent");
};

const GoReply = () => {
  router.push("/AutoReplyComponent");
};
const purse = () => {
  router.push("/Purse");
};

const showDrawer = () => {
  visible.value = true;
};

const onClose = () => {
  visible.value = false;
};

const switchItem = (e) => {
  router.push("/Avatar");
};
</script>

<style lang="scss" scoped>
.bottomBox {
  width: 95%;
  height: 100%;
  margin: 0px 10px;
}
.bottomHeader {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  position: relative;
}
.bottomHeader img {
  padding-left: 0 !important;
}

.contentBottom {
  width: 100%;
  height: 40%;
  position: relative;
  .Maindiv {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    .imgclass {
      width: 100%;
      height: 100%;
      margin-left: 0;
      margin-top: 0;
    }
    .HXq {
      position: absolute;
      z-index: 1;
      right: 5px;
      top: 230px;
    }
  }
}
.main {
  width: 100%;
  height: 100%;
  margin-left: 0;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

.bell {
  font-size: 30px;
  position: absolute;
  right: 0px;
}

.icon-button img {
  width: 24px;
  height: 24px;
}

.FooterB {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  div {
    width: 150px;
    height: 150px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid rgb(228, 223, 223);
    border-radius: 20%;
    box-shadow: 0px 0px 20px 10px #e636;
    color: #e636;
    i {
      font-size: 50px;
    }
  }
}
.ant-drawer-content-wrapper {
  height: 150px !important;
}
.btn {
  width: 100%;
  height: 30px;
  margin: 0 0 10px 0;
  font-size: 20px;
  color: #3589ea;
}
</style>
